Feature/ranking question type vue3#3262
Feature/ranking question type vue3#3262datapumpernickel wants to merge 8 commits intonextcloud:mainfrom
Conversation
Adds a new 'ranking' question type that allows respondents to drag-and-drop predefined options into their preferred order. Based on refactor/vue3 branch, using vue-draggable-plus. Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
…ttest for blank answer Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
…e keyboard menu Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
Chartman123
left a comment
Chartman123
left a comment
There was a problem hiding this comment.
Did a first review of your code and added some comments/suggestions.
Regarding the design:
- I think the current represantation of the unranked/ranked options is too massive.
- Please try to use CSS variable defined in core for pixel values
- I don't like that the page "jumps" as soon as all unranked options are selected (same when one of them is removed again from the ranked list
- Now that I see it, I'm no longer sure if we should really move the drag handle to the end.
For a more profound design review, cc @nextcloud/designers
- merge ranking into grid condition in ApiController - swap icon to IconSwapVertical - fix copyright year to 2026 - use v-else for ranked list header - simplify sort comparison in validation Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
|
Thank you for taking the time to do a first review - appreciated! I incorporated your comments and also re-wrote the layout to a two column layout. This seemed the logical solution to the "jumping" page situation. I was worried that on mobile this might look horrible, but see attached video for an okish-interaction I would say. Screen.Recording.2026-04-03.at.11.13.44.mov |
|
I liked the single column layout. But perhaps we should just keep the area for unranked options visible and just display a text that says that no more options are available/all options are ranked |
|
I liked single column also a bit more, but even when you leave the area visible, the area will change size noticeably, when options go from one row to two rows. So unless we leave the area for unranked options very large, which in edge cases might prevent filling out the form, I think two column layout is better for the non-jumpy behaviour. But I am really not passionate about either, just did not have a better idea for evading jumping behaviour (which I agree is annoying). |
Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
datapumpernickel
force-pushed
the
feature/ranking-question-type-vue3
branch
from
c4eb562 to
d87fc9c
Compare
|
True, didn't consider two (or potentially more) rows. So let's revert to the old behavior :) and see what the designers will say about the rest. |
…eep unranked options area visible Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
|
Ok, reverted to single column layout. See attached video for two row behaviour. Screen.Recording.2026-04-03.at.12.54.40.mov |
2 participants
As proposed in #1278: Add Ranking question type
Refactored to Vue3, after closing: #3247
Rebased to main after closing: #3248
This adds a new question type that lets respondents rank options by dragging them into order.
Results are scored using Borda count — first place gets the most points, last place gets the least. The summary shows each option's total score and average rank with a visual bar, along with a short explanation of how scoring works.
For export, ranking questions get one column per option (like grid questions do), with the rank number as the value. Answers are stored as a JSON array of option IDs, which keeps things consistent with how grid answers are stored.
There's also an optional shuffle setting.
Again disclaimer: heavy use of genAI, I did try to check the code to the best of my abilities and ran it on nextcloud-docker-dev to actually interact with it and export data.
Ok, it is now implemented as a tap-and-drag interface, which allows to set a required-flag or leave it blank. 🎊
Sorry, for the forth-and-back.
See attached video for demonstration: https://github.com/user-attachments/assets/9745e93c-87db-49ae-990f-ed305827deee